<!-- //秒杀活动 -->
 <template>
  <div>
    <el-card
      style="max-width: 100%;"
      class="card-table"
    >
      <search-box
        :tableDataInput="tableData"
        @search="handleSearch"
      ></search-box>
      <el-button
        class="btn1"
        @click="showDialog"
      ><i
          class="el-icon-plus"
          style="margin-right: 3px;"
        ></i>活动</el-button>

      <el-table
        :data="selectedItems"
        style="margin-top: 16px;font-size: 16px;"
        :header-cell-style="{ background: '#EBEEF2' }"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="id"
          label="序号 "
        />
        <el-table-column
          prop="name"
          label="活动标题"
          width="100"
        />
        <el-table-column
          prop="type"
          label="活动状态"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          width="150"
        >

        </el-table-column>
        <el-table-column
          prop="catName"
          label="线上/线下"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.catName"
              active-color="skyblue"
              inactive-color="gray"
              :active-value=1
              :inactive-value=0
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="memo"
          label="报名商家"
          align="center"
        />
        <el-table-column
          label="操作"
          width="300%"
        >
          <template slot-scope="scope">
            <div>
              <span @click="seckillPro(scope.$index,scope.row)">
                <i class="el-icon-plus"></i>
                <span style="margin-left: 4px;">秒杀商品</span>
              </span>
              <span @click="edit(scope.$index,scope.row)">
                <img
                  src="@/assets/edit.svg"
                  class="edit"
                >
                <span style="margin-left: 4px;">编辑</span>
              </span>
              <span v-if="scope.row.catName==1" @click="deline(scope.$index,scope.row)">
                <img
                  src="@/assets/down.svg"
                  class="delete"
                >
                <span>下线</span>
              </span>
              <span v-if="scope.row.catName==0" @click="upline(scope.$index,scope.row)">
                <img
                  src="@/assets/up.svg"
                  class="delete"
                >
                <span>上线</span>
              </span>
              <span @click="deleted(scope.$index,scope.row)">
                <img
                  src="@/assets/delete.svg"
                  class="delete"
                >
                <span>删除</span>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddSecKilldingVue v-show="showdialogadd" :Visable.sync="showdialogadd" @close="closedailog"></AddSecKilldingVue>
    <SeckilldingProductVue v-show="showseckingDailog" :Visible.sync="showseckingDailog" @close="Seckillclosedailog"></SeckilldingProductVue>
  </div>
</template>
 
 <script>
import AddSecKilldingVue from './components/AddSecKillding.vue';
import SeckilldingProductVue from './components/SeckilldingProduct.vue';
export default {
    name: "SecKilling",
    components: {
      AddSecKilldingVue,
      SeckilldingProductVue,
    },
    data() {
      return {
        showdialogadd: false,
        showseckingDailog:false,
        tableData: [],
        selectedItems: [{
          id: 1,
          name: "618秒杀活动",
          type: "进行中",
          startTime: "2021-06-01",
          endTime: "2021-06-20 ",
          catName: 1,
          memo: 45,
        },
        {
          id: 2,
          name: "618秒杀活动",
          type: "未开始",
          startTime: "2021-06-01",
          endTime: "2021-06-20",
          catName: 0,
          memo: 36,
        },
      ],
        dialogVisible: false,
        form: {
          id: "",
          name: "",
          type: "",
          startTime: "",
          endTime: "",
          catName: "",
          memo: "",
          seckillPro: [],
          status: 1,
          children: [],
          hasChildren: false
        },
       }
      },
      methods: {
        handleSearch(data) {
          this.selectedItems = data;
        },
        showDialog() {
          this.showdialogadd=true;
          console.log(this.showdialogadd)
        },
        edit(index, row) {
          this.dialogVisible = true;
          this.form = row;
        },
        deline(index, row) {
          this.form.catName = 0;
          this.handleEdit(index, row);
          this.$confirm('确认下线该活动？')
           .then(() => {
              // this.row.catName = 0;
              this.$message.success('下线成功');
               row.catName=0
              //this.selectedItems.splice(index, 1);
              //this.handleEdit(index, row);
            })
           .catch(() => {
              this.$message.info('已取消');
            });
        },
        upline(index, row) {
          this.form.catName = 1;
          this.handleEdit(index, row);
          this.$confirm('确认上线该活动？')
           .then(() => {
              // this.row.catName = 1;
              this.$message.success('上线成功');
              row.catName = 1;
              //this.selectedItems.splice(index, 1);
              //this.handleEdit(index, row);
            })
           .catch(() => {
              this.$message.info('已取消'); 
        })
        },
        deleted(index, row) {
          // this.$confirm('确认删除该活动？')
          //  .then(() => {
          //     this.selectedItems.splice(index, 1);
          //     this.handleEdit(index, row);
          //     this.$message.success('删除成功');
          //   })
          //  .catch(() => {
          //     this.$message.info('已取消');
          //   });
        // this.selectedItems.splice(index, 1);
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.selectedItems.splice(index, 1);
        this.handleEdit(index, row);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
        },
        handleEdit(index, row) {
          this.$emit("edit", index, row);
        },
        seckillPro(index, row) {
          console.log("seckillPro")
          this.showseckingDailog=true;
          console.log(this.showseckingDailog)
          //this.$emit("seckillPro", index, row);
        },
        closedailog(data){
          this.showdialogadd = false;
        },
        Seckillclosedailog(data){
          this.showseckingDailog = false;
        }
      }
};
</script>
 
 <style>
.el-icon-arrow-right:before {
  content: "\e784";
}
/* 图片样式 */
.img-box {
  left: 292px;
  top: 207px;
  width: 102px;
  height: 70px;
  opacity: 1;
  border-radius: 5px;
}

.btn1 {
  position: absolute;
  right: 40px;
  opacity: 1;
  border-radius: 80px;
  width: 130px;
  height: 38px;
  color: white;
  font-size: 15px;
  background: rgba(126, 114, 242, 1);
}


.edit {
  width: 13.2px;
  height: 14px;
  position: relative;
  margin-left: 28px;
  top: 2px;
}

.delete {
  width: 13.2px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-left: 28px;
  margin-right: 3px;
}
:deep(.el-tabs__nav-wrap::after) {
    height: 0px !important;
}
</style>